<template>
  <div v-loading="loading" class="list-page">
    <div v-if="list.length || recommendList.length">
      <div class="recommend" v-if="recommendList.length">
        <h5>活动推荐</h5>
        <div class="content1">
          <div
            v-for="(item, index) in recommendList"
            :key="index"
            :style="{ marginRight: ++index % 2 == 0 ? '0' : '2%' }"
          >
            <div @click="jump(item.associationActivityId)">
              <el-card class="card" shadow="hover" v-if="item.state != 2">
                <div style="display: flex">
                  <div
                    class="card-l"
                    :style="{
                      minHeight: pageW >= 1920 ? '240px' : '180px',
                    }"
                  >
                    <div
                      style="
                        text-align: left;
                        padding-bottom: 10px;
                        fontsize: 24px;
                      "
                      v-if="pageW < 1920"
                    >
                      <span
                        v-if="item.activityState == 1"
                        style="color: #0b4e9e"
                        >活动预约中
                      </span>
                      <span v-else>活动已结束 </span>
                    </div>
                    <img
                      v-if="item.activityCover"
                      :src="$store.state.baseUrl + item.activityCover"
                      alt=""
                    />
                    <img v-else src="@/assets/default.jpg" alt="" />
                  </div>
                  <div class="card-r">
                    <h5>{{ item.activityTitle }}</h5>
                    <div>
                      <img src="@/assets/home_host.png" alt="" />
                      <span style="-webkit-line-clamp: 1">{{
                        item.activityOrganizer
                      }}</span>
                    </div>
                    <div>
                      <img src="@/assets/home_address.png" alt="" />
                      <span>{{ item.activityAddress }}</span>
                    </div>
                    <div>
                      <img src="@/assets/home_start time.png" alt="" />
                      <span>{{ item.startTime | formatTime }}</span>
                    </div>
                    <div>
                      <img src="@/assets/home_end time.png" alt="" />
                      <span>{{ item.endTime | formatTime }}</span>
                    </div>
                    <div>
                      <img src="@/assets/home_phone.png" alt="" />
                      <span>{{ item.bookingLine }}</span>
                    </div>
                    <div v-if="pageW >= 1920">
                      <el-button
                        v-if="item.activityState == 1"
                        size="mini"
                        class="btn"
                        style="
                          border: 1px solid #0b4e9e;
                          color: #0b4e9e;
                          position: absolute;
                          bottom: 0;
                          left: 0;
                        "
                        >预约中</el-button
                      >
                      <el-button
                        v-else
                        class="btn"
                        size="mini"
                        style="
                          border: 1px solid #ccc;
                          position: absolute;
                          bottom: 0;
                          left: 0;
                        "
                        disabled
                        >已结束</el-button
                      >
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
      <div class="review" v-if="list.length">
        <h5>精彩回顾</h5>
        <div class="content">
          <div v-for="(item, index) in list" :key="index" class="dynamic-item">
            <div @click="jump(item.associationActivityId)" class="item">
              <el-card shadow="hover">
                <img
                  v-if="item.activityCover"
                  :src="$store.state.baseUrl + item.activityCover"
                  alt=""
                />
                <img v-else src="@/assets/default.jpg" alt="" />
                <div class="info">
                  <p class="titel">{{ item.activityTitle }}</p>
                  <p class="time">{{ item.startTime | formatTime }}</p>
                </div>
              </el-card>
            </div>
          </div>
        </div>

        <el-pagination
          v-if="list.length"
          class="pagination"
          background
          @current-change="handleCurrentChange"
          :page-size="pageParams.pageSize"
          layout="prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
    <div v-else class="notData">
      <span v-if="!loading">暂无数据</span>
    </div>
  </div>
</template>
<script >
import api from "@/api/modules/home.js";
export default {
  data() {
    return {
      pageW: 1920,
      loading: true,
      recommendList: [],
      list: [],
      count: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 8,
      },
    };
  },
  mounted() {
    this.pageW = window.screen.width;
    this.getRecommend();
    this.getData(this.pageParams);
  },
  methods: {
    getRecommend() {
      api.getFrontRecommend().then((res) => {
        this.recommendList = res.data;
      });
    },
    getData(params) {
      api.getActivityPage(params).then((res) => {
        this.list = res.data;
        this.count = res.count;
        setTimeout(() => {
          this.loading = false;
        });
      });
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val;
      this.getData(this.pageParams);
    },
    jump(id) {
      this.$router.push(`/activityDetail/${id}`);
    },
  },
};
</script>
<style lang="less" scoped>
h5 {
  text-align: left;
  font-size: 24px;
}
.content1 {
  margin: 64px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  > div {
    width: 49%;
    margin-bottom: 20px;
    .card {
      box-sizing: border-box;
      padding: 20px 17px;
      .card-l {
        min-width: 48%;
        max-width: 48%;
        position: relative;
        margin-right: 20px;
        img {
          width: 100%;
          height: 13vw;
        }
        p {
          position: absolute;
          top: 50%;
          padding: 0 40px;
          box-sizing: border-box;
          font-size: 20px;
          color: #fff;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
      .card-r {
        width: 100%;
        position: relative;
        overflow: hidden;
        h5 {
          margin: 0 0 16px 0;
          padding-bottom: 16px;
          border-bottom: 1px solid #e8f2fd;
          font-size: 1.5rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
        }
        div {
          margin-bottom: 8px;
          display: flex;
          img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            vertical-align: middle;
          }
          span {
            flex: auto;
            overflow: hidden;
            display: block;
            max-width: 294px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: #666666;
            // font-size: 14px;
          }
        }
      }
    }
    .btn{
      font-size: 16px;
    }
  }
}
.content {
  margin: 64px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}
</style>